@charset "UTF-8";
.zz-row{
  position: relative;
  box-sizing: border-box;
}
.zz-row:after{
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.zz-col-1, .zz-col-2, .zz-col-3, .zz-col-4, .zz-col-5, .zz-col-6, .zz-col-7, .zz-col-8, .zz-col-9, .zz-col-10, .zz-col-11, .zz-col-12, .zz-col-13, .zz-col-14, .zz-col-15, .zz-col-16, .zz-col-17, .zz-col-18, .zz-col-19, .zz-col-20, .zz-col-21, .zz-col-22, .zz-col-23, .zz-col-24 {
  float: left;
  text-align: left;
  box-sizing: border-box;
}
@for $i from 0 to 24 {
  .zz-col-#{$i} {
    width: 1 / 24 * 100 * $i * 1%
  }
  .zz-col-offset-#{$i} {
    margin-right: 1 / 24 * 100 * $i * 1%
  }
  .zz-col-pull-#{$i} {
    position: relative;
    right: 1 / 24 * 100 * $i * 1%
  }
  .zz-col-push-#{$i} {
    position: relative;
    left: 1 / 24 * 100 * $i * 1%
  }
}
@media (max-width: 1540px) {
  @for $i from 0 to 24 {
    .zz-col-lg-#{$i} {
      width: 1 / 24 * 100 * $i * 1%
    }
    .zz-col-lg-offset-#{$i} {
      margin-right: 1 / 24 * 100 * $i * 1%
    }
    .zz-col-lg-pull-#{$i} {
      position: relative;
      right: 1 / 24 * 100 * $i * 1%
    }
    .zz-col-lg-push-#{$i} {
      position: relative;
      left: 1 / 24 * 100 * $i * 1%
    }
  }
  .zz-col-left-4{
    margin-left: -4%;
  }
  .zz-col-left-3{
    margin-left: -3%;
  }
  .zz-col-right-7 {
    margin-right: 7%;
  }
}

